<ssl-header></ssl-header>
<div class="ssl-reset-password">
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="row">
          <div class="col-md-9 col-md-offset-3">
            <h1>修改密码</h1>
          </div>
        </div>
        <form class="form-horizontal" [formGroup]="fg" (ngSubmit)="onSubmit()" novalidate>
          <div class="form-group">
            <label for="oldPassword" class="control-label col-md-3">旧密码</label>
            <div class="col-md-6">
              <input type="password" class="form-control" id="oldPassword" formControlName="oldPassword" [class.ssl-valid]="!oldPassword.errors" [class.ssl-invalid]="oldPassword.errors" tabindex="2">
            </div>
            <div class="col-md-6 col-md-offset-3 text-danger" [hidden]="!oldPassword.hasError('required') || oldPassword.pristine">请输入旧密码</div>
            <div class="col-md-6 col-md-offset-3 text-danger" [hidden]="!oldPassword.hasError('minlength') || oldPassword.pristine">最少{{oldPassword.getError('minlength')?.requiredLength}}位, 目前{{oldPassword.getError('minlength')?.actualLength}}位</div>
            <div class="col-md-6 col-md-offset-3 text-danger" [hidden]="!oldPassword.hasError('maxlength') || oldPassword.pristine">最多{{oldPassword.getError('maxlength')?.requiredLength}}位, 目前{{oldPassword.getError('maxlength')?.actualLength}}位</div>
          </div>
          <div class="form-group">
            <label for="newPassword" class="control-label col-md-3">新密码</label>
            <div class="col-md-6">
              <input type="password" class="form-control" id="newPassword" formControlName="newPassword" [class.ssl-valid]="!newPassword.errors" [class.ssl-invalid]="newPassword.errors" tabindex="2">
            </div>
            <div class="col-md-6 col-md-offset-3 text-danger" [hidden]="!newPassword.hasError('required') || newPassword.pristine">请输入新密码</div>
            <div class="col-md-6 col-md-offset-3 text-danger" [hidden]="!newPassword.hasError('minlength') || newPassword.pristine">最少{{newPassword.getError('minlength')?.requiredLength}}位, 目前{{newPassword.getError('minlength')?.actualLength}}位</div>
            <div class="col-md-6 col-md-offset-3 text-danger" [hidden]="!newPassword.hasError('maxlength') || newPassword.pristine">最多{{newPassword.getError('maxlength')?.requiredLength}}位, 目前{{newPassword.getError('maxlength')?.actualLength}}位</div>
          </div>
          <div class="form-group">
            <label for="confirmNewPassword" class="control-label col-md-3">确认新密码</label>
            <div class="col-md-6">
              <input type="password" class="form-control" id="confirmNewPassword" formControlName="confirmNewPassword" [class.ssl-valid]="!confirmNewPassword.errors" [class.ssl-invalid]="confirmNewPassword.errors || fg.hasError('passwordNotEqual')" tabindex="3">
            </div>
            <div class="col-md-6 col-md-offset-3 text-danger" [hidden]="!confirmNewPassword.hasError('required') || confirmNewPassword.pristine">请确认新密码</div>
            <div class="col-md-6 col-md-offset-3 text-danger" [hidden]="!fg.hasError('passwordNotEqual') || confirmNewPassword.invalid">两次密码不一致</div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-3 col-sm-9">
              <button type="submit" class="btn btn-success" [disabled]="fg.invalid || submitted" tabindex="4">{{submitted ? resetSuccess ? '修改成功' : '提交中' : '提交'}} <span class="glyphicon" [class.glyphicon-hand-up]="!submitted" [class.glyphicon-repeat]="submitted && !resetSuccess" [class.ssl-anim-rotate]="submitted && !resetSuccess" [class.glyphicon-ok-sign]="resetSuccess"></span></button>
              <button *ngIf="resetSuccess" type="button" class="btn btn-link" [routerLink]="['/sign-in']" (click)="stopCountDown()" tabindex="5">{{'现在去重新登入（' + countDown + '）'}} <span class="glyphicon glyphicon-log-in ssl-anim-move-right"></span></button>
              <button *ngIf="!resetSuccess" class="btn btn-default" onclick="history.back();">返回 <span class="glyphicon glyphicon-share-alt"></span></button>
              <p class="bg-danger text-danger ssl-msg-err" [hidden]="!errMsg"><span class="glyphicon glyphicon-remove-sign" style="margin-right: 5px;"></span>{{errMsg}}</p>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<ssl-footer></ssl-footer>
